*{
	margin: 0;
	padding: 0;
}

body{
	background-color:skyblue;
	perspective: 800px;
}


.box{
	width: 200px;
	height: 200px;
	margin: auto;
	margin-top: 200px;
	position: relative;
	transform-style: preserve-3d;
	transform: rotateX(-30deg) rotateY(30deg);
	animation: a 5s infinite linear;
}

@keyframes a{
	100%{transform: rotateX(30deg) rotateY(720deg);}
	
}

.box div{
	width: 200px;
	height: 200px;
	font-size: 30px;
	position: absolute;
	text-align: center;
	line-height: 200px;
	top: 0;
	left: 0;
	transition: all 2s;
}

.xin{
	color: lightpink;
	animation: b 2s infinite linear !important;
}

@keyframes b{
	100%{transform: rotateY(360deg);}
	
}

.top{
	transform: rotateX(90deg) translateZ(100px);
	background-color: aqua;
}

.bottom{
	transform: rotateX(-90deg) translateZ(100px);
	background-color: blue;
}

.left{
	transform: rotateY(90deg) translateZ(100px);
	background-color: blueviolet;
}

.right{
	transform: rotateY(-90deg) translateZ(100px);
	background-color: red;
}

.front{
	transform: translateZ(100px);
	background-color: chartreuse;
}

.back{
	transform: translateZ(-100px);
	background-color:orange ;
}

.box:hover .top{
	transform: rotateX(90deg) translateZ(200px);
}
.box:hover .bottom{
	transform: rotateX(-90deg) translateZ(200px);
}
.box:hover .left{
	transform: rotateY(90deg) translateZ(200px);
}
.box:hover .right{
	transform: rotateY(-90deg) translateZ(200px);
}

.box:hover .front{
	transform:translateZ(200px);
}

.box:hover .back{
	transform: translateZ(-200px);
}

.box img{
	width: 200px;
	height: 200px;
	display: block;
}